import { Select, Button, ProCard, Divider,Drawer, Space } from 'szcd';
import { type Option } from '../MiniBpmn/types';
import React, { useEffect, useState } from 'react';
import styles from './index.module.less';
import TemplateModeFork from '../TemplateModeFork';
interface IView {
  mode?: 'multiple';
  value: Option[];
  onChange?: (value: Option[]) => void;
  visible?:boolean,
  setVisible: (status:boolean) => void
}

const UserSelector: React.FC<IView> = function ({ value, onChange, mode,visible,setVisible }) {
  const [local, setLocal] = useState<Option[]>([]);

  useEffect(() => {
    setLocal(value);
  }, [value]);

  return <>
    <Drawer
      title="添加指定用户"
      open={visible}
      width={620}
      onClose={()=>{
        setVisible(false);
      }}
      footer={
        <Space>
          <Button onClick={()=>{
            setVisible(false);
          }}
          >取消</Button>
          <Button onClick={()=>{
            onChange?.(local);
            setVisible(false);
          }} type="primary"
          >
            确定
          </Button>
        </Space>
    }
    >
      <ProCard ghost style={{ padding: 0 }}>
        <Select value={local} className={styles['hide-arrow']} style={{ width: '100%' }} mode={mode}
          onChange={(e) => {
          setLocal(e);
        }}
          open={false}
        />
        <Divider style={{ margin: '20px 0 0 0' }} />
      </ProCard>
      <TemplateModeFork
        PageContent={
          <div>
            <Button
              onClick={() => {
              setLocal([...local, { label: String(Math.random()), value: String(Math.random()) }]);
            }}
            >add</Button>
          </div>
      }
      />
    </Drawer>
  </>;
};

export default UserSelector;